<template>
	<view style="width: 100%;">
		<view class="toolbar u-flex u-flex-wrap">
			<!-- 加粗 -->
			<view class="iconfont icon-cuti" @click="toolBarClick('bold')"></view>
			<!-- 斜体 -->
			<view class="iconfont icon-italic" @click="toolBarClick('italic')"></view>
			<!-- 标题 -->
			<view class="iconfont icon-biaotizhengwenqiehuan" @click="toolBarClick('header')"></view>
			<!-- 插入链接 -->
			<view class="iconfont icon-738bianjiqi_chaolianjie" @click="toolBarClick('link')"></view>
			<!-- 插入图片 -->
			<view class="iconfont icon-tupian" @click="toolBarClick('imgage')"></view>
			<!-- 插入代码 -->
			<view class="iconfont icon-daima" @click="toolBarClick('code')"></view>
			<!-- 插入引用 -->
			<view class="iconfont icon-yinyong" @click="toolBarClick('blockquote')"></view>
			<!-- 插入列表文本 -->
			<view class="iconfont icon-liebiao" @click="toolBarClick('unorderedlist')"></view>
			<!-- 插入列表文本 -->
			<view class="iconfont icon-youxuliebiao" @click="toolBarClick('orderedlist')"></view>
			<!-- 插入表格 -->
			<view class="iconfont icon-biaoge" @click="toolBarClick('table')"></view>
			<!-- 清除 -->
			<view class="iconfont icon-qingchu" @click="toolBarClick('clear')"></view>
			<!-- 预览 -->
			<view class="iconfont icon-yulan" @click="toolBarClick('look')"></view>
			<!-- 上传语音 -->
			<view v-if="isVoice" class="iconfont icon-yuyin" @click="value = true"></view>
		</view>
		<view class="" v-if="!isVoice">
			<view class="input-content" v-if="!showPreview">			
				<u-input v-model="textareaData" type="textarea" :border="true" :focus="true" :height="height"/>
			</view>
			<scroll-view v-if="showPreview" class="u-p-30" scroll-y :style="[{ minHeight: height + 'rpx', width: 'auto', border: '1px solid #eee' }]">
				<u-parse
					:html="textareaHtml"
					@imgtap="navigate"
					@linkpress="navigate"
					:tag-style="vuex_parse_style"
					:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
				></u-parse>
			</scroll-view>
		</view>
		<view class="voice-show" :style="[{height:height+'rpx',width:'100%'}]" v-else>
			<view class="u-p-t-30 u-p-b-30" v-if="line_path">
				<fa-audio :htmls="audioHtml"></fa-audio>
			</view>
		</view>
		<!-- 录音 -->
		<!-- <fa-voices v-model="value" @okClick="okClick"></fa-voices> -->
	</view>
</template>

<script>
import marked from './marked/index.js';
export default {
	name: 'fa-markdown',
	data: function() {
		return {
			cursor: 0,
			textareaData: '',
			textareaHtml: '',
			showPreview: false,
			autoFocus: false,
			value:false,
			local_path:'',
			line_path:'',
			audioTime:''
		};
	},
	props: {
		markdown: {
			type: String,
			default: ''
		},
		html: {
			type: String,
			default: ''
		},
		height: {
			type: Number,
			default() {
				return 500;
			}
		},
		isVoice: {
			type: Boolean,
			default: false
		}
	},
	computed:{
		audioHtml(){
			return `<audio src="${this.line_path}" duration="${this.audioTime}">`;
		}
	},
	methods: {
		preview(src, e) {
			uni.previewImage({
				urls: src
			});
		},
		navigate(e) {
			console.log(e);
		},
		toolBarClick(type) {
			//语音不能加其他
			if(this.isVoice){
				return;
			}
			switch (type) {
				case 'bold':
					this.textareaData += '**粗体文字** ';
					break;
				case 'italic':
					this.textareaData += '*斜体* ';
					break;
				case 'header':
					uni.showActionSheet({
						itemList: ['标题1', '标题2', '标题3', '标题4', '标题5', '标题6'],
						success: res => {
							switch (res.tapIndex) {
								case 0:
									this.textareaData += '# 标题1\r';
									return;
								case 1:
									this.textareaData += '## 标题2\r';
									return;
								case 2:
									this.textareaData += '### 标题3\r';
									return;
								case 3:
									this.textareaData += '#### 标题4\r';
									return;
								case 4:
									this.textareaData += '##### 标题5\r';
									return;
								case 5:
									this.textareaData += '###### 标题6\r';
									return;
							}
						}
					});
					break;
				case 'underline':
					this.textareaData += '++下划线++ ';
					break;
				case 'strike':
					this.textareaData += '~~中划线~~ ';
					break;
				case 'sup':
					this.textareaData += '^上角标^ ';
					break;
				case 'sub':
					this.textareaData += '~下角标~ ';
					break;
				case 'alignleft':
					this.textareaData += '\n::: hljs-left\n\n左对齐\n\n:::\n';
					break;
				case 'aligncenter':
					this.textareaData += '\n::: hljs-center\n\n居中对齐\n\n:::\n';
					break;
				case 'alignright':
					this.textareaData += '\n::: hljs-right\n\n\n\n右对齐\n\n:::\n';
					break;
				case 'link':
					this.textareaData += '[在此输入网址描述](在此输入网址) ';
					break;
				case 'imgage':
					uni.chooseImage({
						count: 1,
						success: async chooseImageRes => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							try {
								let res = await this.$api.goUpload({ filePath: tempFilePaths[0] });
								console.log(res);
								this.textareaData += '![](' + res.data.fullurl + ') ';
							} catch (e) {
								console.error(e);
								this.$u.toast('上传失败！');
								this.textareaData += '![](在此输入图片地址) ';
							}
						}
					});
					break;
				case 'code':
					this.textareaData += '\n``` 代码块 \n\n```\n';
					break;
				case 'blockquote':
					this.textareaData += '> 这里输入引用文本这里输入引用文本\n';
					break;
				case 'unorderedlist':
					this.textareaData += '- 这里是列表文本\n';
					break;
				case 'orderedlist':
					this.textareaData += '1. 这里是列表文本\n';
					break;
				case 'table':
					this.textareaData += '\n|列1|列2|列3|\n|-|-|-|\n|单元格1|单元格2|单元格3|\n';
					break;
				case 'clear':
					uni.showModal({
						title: '提示',
						content: '确定清空?',
						success: res => {
							if (res.confirm) {
								this.textareaData = '';
							}
						}
					});
					break;
				case 'look':
					this.showPreview = !this.showPreview;
					break;				
				default:
					this.showPreview = false;
			}
		},
		getCursor(e) {
			//安卓失去焦点获取不到cursor位置,暂不使用
			//this.cursor = e.detail.cursor;
		},
		getAutoFocus() {
			this.autoFocus = true;
		},
		clearData() {
			this.line_path = '';
			this.audioTime = '';
			this.local_path = '';
			this.textareaData = '';
		},
		getData() {
			return this.isVoice?`<audio src="${this.line_path}" duration="${this.audioTime}">`:this.textareaData;
		},
		setData(param) {
			this.textareaData = param;
		},
		okClick(e) {			
			if (!e) {
				this.$u.toast('请先录制语音！');
				return;
			}			
			this.audioTime = e.duration/1000;
			this.$api.goUpload({ filePath: e.tempFilePath }).then(res => {
				console.log(res);
				if (res.code) {
					this.local_path = e.tempFilePath;
					this.line_path = res.data.fullurl;
				} else {
					this.$u.toast(res.msg);
				}
			});
		}
	},
	watch: {
		textareaData: function(newValue, oldValue) {
			this.textareaHtml = marked(newValue);
			this.$emit('getResult', {
				textareaData: newValue,
				textareaHtml: this.textareaHtml
			});
		},
		markdown: {
			handler: function(newValue, oldValue) {
				this.textareaData = newValue;
			},
			immediate: true
		},
		html: {
			handler: function(newValue, oldValue) {
				this.textareaHtml = newValue;
			},
			immediate: true
		},
		isVoice(val){
			this.value = val;
		}
	}
};
</script>

<style scoped>
/* #ifdef APP-PLUS */
@font-face {
	font-family: "iconfont";
	font-weight: normal;
	font-style: normal;
	font-display: auto;
	src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

/* #endif */
/* #ifndef APP-PLUS */
@font-face {
  font-family: 'iconfont';  /* project id 2193584 */
  src: url('//at.alicdn.com/t/font_2193584_kq4678le96.eot');
  src: url('//at.alicdn.com/t/font_2193584_kq4678le96.eot?#iefix') format('embedded-opentype'),
	   url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
	   url('//at.alicdn.com/t/font_2193584_kq4678le96.woff') format('woff'),
	   url('//at.alicdn.com/t/font_2193584_kq4678le96.ttf') format('truetype'),
	   url('//at.alicdn.com/t/font_2193584_kq4678le96.svg#iconfont') format('svg');
}
/* #endif */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-italic:before {
  content: "\e6f8";
}

.icon-zitibiaoti:before {
  content: "\ec84";
}

.icon-daima:before {
  content: "\e70b";
}

.icon-yulan:before {
  content: "\e65b";
}

.icon-chaolianjie:before {
  content: "\e742";
}

.icon-tupian:before {
  content: "\e64a";
}

.icon-738bianjiqi_chaolianjie:before {
  content: "\e663";
}

.icon-youxuliebiao:before {
  content: "\e67e";
}

.icon-qingchu:before {
  content: "\e656";
}

.icon-liebiao:before {
  content: "\e600";
}

.icon-biaotizhengwenqiehuan:before {
  content: "\e6e2";
}

.icon-cuti:before {
  content: "\e6e3";
}

.icon-yinyong:before {
  content: "\e6f4";
}

.icon-yuyin:before {
  content: "\e614";
}

.icon-biaoge:before {
  content: "\e639";
}


</style>
<style lang="scss" scoped>
.input-content {
	width: 100%;
}

.preview {
	border-top: 1px solid #e0e0e0;
	width: 100%;
}

.toolbar {
	width: 100%;
	border: none;
}

.toolbar .iconfont {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 60rpx;
	width: 60rpx;
	margin: 13rpx 0;
	font-size: 40rpx;
	color: #757575;
	border-radius: 11px;
	text-align: center;
	background: none;
	border: none;
	outline: none;
	vertical-align: middle;
}

.voice-show {
	padding:10% 5%;
	border: 1px solid #eee;
}
</style>
